<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />
    <canvas id="canvas-a" class="canvas" width="700" height="100"></canvas>
    <canvas id="canvas-b" class="canvas" width="700" height="100"></canvas>
    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
    <video ref="trailer" id="trailer" muted autoplay loop crossorigin controls>
      <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.webm" type="video/webm" />
      <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4" type="video/mp4" />
      <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mov" type="video/quicktime" />
      Your browser does not support the
      <code>video</code>
      element.
    </video>
    <div id="menu">
      <p><button :class="{active:!!synchronizer}" @click="handleClick('synchronizer')">同步</button></p>
      <p><button :class="{active:isRepeating}" @click="handleClick('isRepeating')">重复</button></p>
      <p><button :class="{active:videoOverlay}" @click="handleClick('videoOverlay')">播放器</button></p>
    </div>
  </div>
</template>

<script>
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from '@functional/utils/mousePosition';

export default defineComponent({
  name: 'video', // 视频
  components: { DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null,
      synchronizer: null,
      isRepeating: true,
      videoOverlay: true
    };
  },
  data() {
    return {
      nowPostion: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
    },

    initViewer() {
      let vm = this;
      Cesium.Ion.defaultAccessToken = $accessToken.default;
      // let osm = new Cesium.OpenStreetMapImageryProvider({
      //   url: 'https://a.tile.openstreetmap.org/'
      // });
      let osm = new Cesium.ArcGisMapServerImageryProvider({
        // url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
        url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
      });
      var viewer = new Cesium.Viewer('cesium-drawer', {
        imageryProvider: osm,
        contextOptions: {
          webgl: {
            alpha: true
          }
        },
        animation: false,
        // baseLayerPicker: false,
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        timeline: false,
        selectionIndicator: false,
        infoBox: false
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        // terrainProvider
      });

      //开启深度检测
      viewer.scene.globe.depthTestAgainstTerrain = true;

      this.viewer = viewer;
      this.onViewerInited(viewer);

      this.initEffects();

      this.viewer.flyTo(this.viewer.entities);
    },
    initEffects() {
      let vm = this;
      const viewer = this.viewer;

      var videoElement = vm.$refs.trailer;

      var sphere = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-79, 39, 1000),
        ellipsoid: {
          radii: new Cesium.Cartesian3(1000, 1000, 1000),
          material: videoElement
        }
      });

      viewer.trackedEntity = sphere;

      sphere.ellipsoid.material.repeat = new Cesium.CallbackProperty(function(time, result) {
        if (!Cesium.defined(result)) {
          result = new Cesium.Cartesian2();
        }
        if (vm.isRepeating) {
          result.x = 8;
          result.y = 8;
        } else {
          result.x = 1;
          result.y = 1;
        }
        return result;
      }, false);

      // Older browsers do not support WebGL video textures,
      // put up a friendly error message indicating such.
      viewer.scene.renderError.addEventListener(function() {
        if (!videoElement.paused) {
          videoElement.pause();
        }
        viewer.cesiumWidget.showErrorPanel('This browser does not support cross-origin WebGL video textures.', '', '');
      });
    },
    handleClick(value) {
      const viewer = this.viewer;
      var videoElement = this.$refs.trailer;
      switch (value) {
        case 'isRepeating':
          this.isRepeating = !this.isRepeating;
          break;
        // Like Image, the video element doesn't have to be part of the DOM or
        // otherwise on the screen to be used as a texture.
        case 'videoOverlay':
          this.videoOverlay = !this.videoOverlay;
          videoElement.style.display = this.videoOverlay?'':'none';
          videoElement.play();
          break;
        case 'synchronizer':
          // By default, the video plays normally and simply shows whatever frame the video is currently on.
          // We can synchronize the video with the scene clock using a VideoSynchronizer.
          if (this.synchronizer) {
            this.synchronizer = this.synchronizer.destroy();
            videoElement.playbackRate = 1.0;
            videoElement.play();
            return;
          }

          this.synchronizer = new Cesium.VideoSynchronizer({
            clock: viewer.clock,
            element: videoElement
          });
          videoElement.play();
          break;
      }
    }
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.chart-container {
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: rgba(0, 0, 0, 0.5);

  #profileChart {
    width: 600px;
    height: 300px;
  }
}
#canvas-a {
  top: 10px;
  display: none;
}

#canvas-b {
  top: 120px;
  display: none;
}
#trailer {
  position: absolute;
  bottom: 75px;
  right: 0;
  width: 320px;
  height: 180px;
}
#menu {
  position: absolute;
  top: 80px;
  left: 10px;
  z-index: 999;

  button {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &.active{
      background-color: rgba(100, 0, 100, 0.75);
    }

    &:hover {
      opacity: 0.75;
    }
  }
}
</style>
